<!--  -->
<template>
  <div>
    <van-tabbar v-model="active">
      <van-tabbar-item to="/home"
                       icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/label"
                       icon="label-o">专题</van-tabbar-item>
      <van-tabbar-item to="/category"
                       icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item to="/cart"
                       icon="cart-o">购物车</van-tabbar-item>
      <van-tabbar-item to="/user"
                       icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },

  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  computed: {
    active: {
      get () {
        /* 
        刷新页面时tabbar当前样式调整
        此时，在 http://localhost:5000/topic 下刷新页面，tabbar当前样式不正确，
        我们可以利用路由中的meta来解决
        */
        return this.$route.meta.activeNum
      },
      set () {

      }
    }

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>